<template>
  <div class="app-container customer-div">
    <el-menu :default-active="trackingParams.tab" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="">我的</el-menu-item>
<!--      <el-menu-item index="weekNeedTracking">本周需跟进</el-menu-item>-->
<!--      <el-menu-item index="monthNeedVisit">本月需拜访</el-menu-item>-->
      <el-menu-item index="monthNeedTracking">本月需跟进</el-menu-item>
    </el-menu>

    <div style="margin-top: 20px">
      <!--搜索-->
      <el-form :inline="true" :model="trackingParams" size="mini" label-width="100px">
        <el-form-item label="供应商名称：">
          <el-input v-model="trackingParams.supplierName" clearable></el-input>
        </el-form-item>
        <el-form-item label="供应商类型：" prop="supplierType">
          <el-select v-model="trackingParams.supplierType" clearable>
            <el-option v-for="(item,index) in supplierTypeList" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="跟进等级：">
          <el-select v-model="trackingParams.supplierLevel" class="input-width" style="width:195px" placeholder="请选择" clearable>
            <el-option v-for="(item,index) in supplierLevelList" :key="index" :value="item" :label="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="未跟进天数：">
          <el-input v-model="trackingParams.unTrackingDays" type="number" clearable style="width:150px;"></el-input><span style="padding-left:5px">天</span>
        </el-form-item>

        <el-form-item label="已跟进次数：">
          <el-input v-model="trackingParams.monthTrackingNum" type="number" clearable style="width:150px;"></el-input><span style="padding-left:5px">次</span>
        </el-form-item>
        <el-form-item label="还需跟进次数：">
          <el-input v-model="trackingParams.monthTrackingNeedNum" type="number" clearable style="width:150px;"></el-input><span style="padding-left:5px">次</span>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleSearchList()"
            type="primary">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <el-radio-group  size="small" v-model="trackingParams.stepId" @change="handleSearchList">
        <el-radio-button label="" >全部({{num[0]}})</el-radio-button>
        <el-radio-button :label="item.stepId" v-for="item in stepList" :key="item.stepId">{{ item.stepName }}({{num[item.stepId]}})</el-radio-button>
      </el-radio-group>
      <el-table
        v-loading="trackingLoading"
        :data="trackingList"
        border
        style="width: 100%; margin-top: 20px">
        <el-table-column
          label="供应商名称"
          width="260">
            <template slot-scope="scope">
              <el-link @click="toDetail(scope.row)" type="primary">
                {{scope.row.supplierName}}
              </el-link>
            </template>
        </el-table-column>
        <el-table-column
          prop="relationSupplier"
          label="关联公司"
          align="center"
          width="200">
        </el-table-column>

        <el-table-column
          prop="supplierType"
          label="供应商类型"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="supplierLevel"
          label="跟进等级"
          align="center"
          width="100">
        </el-table-column>
        <el-table-column
          prop="lastTrackingTime"
          label="最近跟进时间"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="lastVisitTime"
          label="最近拜访时间"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="lastOrderTime"
          label="最近采购时间"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="trackingActualNum"
          label="已跟进次数"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="trackingNeedNum"
          label="需跟进次数"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="trackingNumPerMonth"
          label="跟进带宽(次/月)"
          align="center"
          width="150">
        </el-table-column>
        <el-table-column
          prop="visitNumPerYear"
          label="拜访带宽(次/年)"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="负责人"
          width="100"
          align="center">
        </el-table-column>
        <el-table-column
          width="150"
          fixed="right"
          label="操作"
          align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showSupplierGj('add',scope.row)">新增跟进
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="showPopFellow(scope.row)">跟进记录
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChangeTracking"
        @current-change="handleCurrentChangeTracking"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="trackingParams.pageNum"
        :page-size="trackingParams.pageSize"
        :page-sizes="[10,15,20]"
        :total="trackingCount">
      </el-pagination>
    </div>

    <!-- 新增跟进 -->
    <addSupplierGj ref="addSupplierGj"></addSupplierGj>
    <!-- 跟进记录 -->
    <supplierPopFellow ref="supplierPopFellow"></supplierPopFellow>
  </div>
</template>

<script>
import {
  userSupplierListAPI,
} from '@/api/partner';
import {
  supplierConstantAPI
} from '@/api/company';
import {
  getDevelopStepListAPI
} from '@/api/fms';
import { formatDate } from '@/utils/date';
import store from '@/store';
import { mapGetters } from 'vuex';
import addSupplierGj from './components/addSupplierGj.vue';
import supplierPopFellow from './components/supplierPopFellow.vue'
const defaultTrackingParams = {
  type: 'my',
  tab: '',
  stepId:'',//跟进阶段
  supplierName: '',
  supplierType: '',//供应商类型
  userId:'',//采购负责人ID
  supplierLevel: '',//跟进等级
  unTrackingDays: '',//未跟进天数

  monthTrackingNum: '',//已跟进次数
  monthTrackingNeedNum  : '', //还需跟进次数
  pageNum: 1,
  pageSize: 10,
};
export default {
  name: "myPurchaseTrackingList",
  data() {
    return {
      roles: store.getters.roles ? store.getters.roles : [],
      trackingParams:JSON.parse(JSON.stringify(defaultTrackingParams)),
      trackingList: [],
      trackingCount: 0,
      trackingLoading: false,
      loading: false,
      supplierLevelList: [],
      supplierTypeList: [],
      stepList: [],
      num:[],
    }
  },
  components: {
    addSupplierGj,
    supplierPopFellow
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getTrackingListData();
    this.getSupplierLevelList();
    this.getStepList();
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  methods: {
    showPopFellow(item) {
      this.$refs.supplierPopFellow.showPop(item);
    },
    //获取开发阶段
    getStepList(){
      getDevelopStepListAPI({pageNum:1,pageSize: 1000,isEnable:1,sort:'asc'}).then((res)=>{
        this.stepList = res.list
      })
    },
    // 编辑跟进
    showSupplierGj(type, item) {
      if (type == 'add') {
        this.$refs.addSupplierGj.showPop(type,item)
      } else if (type == 'edit') {
        this.$refs.addSupplierGj.showPop(type,item)
      } else if (type == 'see') {
        this.$refs.addSupplierGj.showPop(type,item)
      }
    },
    // 判断文件类型
    checkFileType(fileName) {
      if (fileName.match(/\.(jpg|jpeg|png|gif|webp)/)) {
        return "image";
      } else if (fileName.match(/\.(doc|docx)/)) {
        return "word";
      } else if (fileName.match(/\.(wav|mp3|aac|ogg|wma)/)) {
        return "audio";
      } else {
        return "unknown";
      }
    },
    //获取供应商等级列表
    getSupplierLevelList() {
      supplierConstantAPI().then((res) => {
        this.supplierTypeList = res.supplierType;
        this.supplierLevelList = res.supplierLevel;
      })
    },

    //去详情页
    toDetail(item) {
      let routeData = this.$router.resolve({ name: 'supplierInfo', query: { id: item.supplierId } });
      window.open(routeData.href);
    },
    /**
     * 切换选择状态
     */
    handleSelect(key, keyPath) {
      this.trackingParams = JSON.parse(JSON.stringify(defaultTrackingParams));
      this.trackingParams.tab = key;
      this.handleSearchList();
    },

    handleSearchList() {
      this.trackingParams.pageNum = 1;
      this.getTrackingListData();
    },
    //获取跟进记录
    getTrackingListData() {
      this.trackingLoading = true;
      let data = JSON.parse(JSON.stringify(this.trackingParams));
      userSupplierListAPI(data).then((res) => {
        this.trackingList = res.list;
        this.num = res.num;
        this.trackingCount = res.count;
        this.trackingLoading = false;
      }).catch(() => {
        this.trackingLoading = false;
      })
    },

    handleSizeChangeTracking(val) {
      this.trackingParams.pageNum = 1;
      this.trackingParams.pageSize = val;
      this.getTrackingListData();
    },
    handleCurrentChangeTracking(val) {
      this.trackingParams.pageNum = val;
      this.getTrackingListData();
    },
  },
};
</script>

<style scoped lang="scss">
.imgStyle{
  float: left;
}
</style>
